<!--词云-->
<template>
    <div id="mywordcloud" style="width:100%;height:600px;margin: 10px auto;" :data="worddata"></div>
<!--    <div id="mywordcloud" style="width: 100%;height: 300px;margin: 50px auto;" :data="worddata"></div>-->
</template>
<script>
    import request from "../utils/request";

    const echarts = require('echarts');

    export default {
        name: "WordCloud",
        data () {
            return {
                search: '',
                currentPage: 1,
                pageSize: 100,
                total: 0,
                tableData: [],
                msg: 'Welcome to Your Vue.js App',
                worddata: []
            }
        },
        mounted(){
            this.initChart();
        },
        methods: {
            initChart() {
                this.chart = echarts.init(document.getElementById("mywordcloud"));
                // console.log('lll');

                request.get("/wordCloud",{ // 请求/wordCloud接口
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=>{
                    // console.log(res)
                    // 将请求得到的数据赋值给data1、data2
                    this.worddata=[]
                    for (var i=0;i<res.data.records.length;i++)
                    {
                        // this.data1[i]=res.data.records[i]['word']
                        // this.data2[i]=res.data.records[i]['frequency']
                        this.worddata.push({"name":res.data.records[i]['word'],'value':res.data.records[i]['frequency']})
                    }
                    // console.log(this.worddata)

                    // var maskImage = new Image();
                    // //重点：云彩图片的base64码
                    // maskImage.src = 'data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgNTQ4LjE3NiA1NDguMTc2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NDguMTc2IDU0OC4xNzY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNNTI0LjE4MywyOTcuMDY1Yy0xNS45ODUtMTkuODkzLTM2LjI2NS0zMi42OTEtNjAuODE1LTM4LjM5OWM3LjgxLTExLjk5MywxMS43MDQtMjUuMTI2LDExLjcwNC0zOS4zOTkgICBjMC0yMC4xNzctNy4xMzktMzcuNDAxLTIxLjQwOS01MS42NzhjLTE0LjI3My0xNC4yNzItMzEuNDk4LTIxLjQxMS01MS42NzUtMjEuNDExYy0xOC4yNzEsMC0zNC4wNzEsNS45MDEtNDcuMzksMTcuNzAzICAgYy0xMS4yMjUtMjcuMDI4LTI5LjA3NS00OC45MTctNTMuNTI5LTY1LjY2N2MtMjQuNDYtMTYuNzQ2LTUxLjcyOC0yNS4xMjUtODEuODAyLTI1LjEyNWMtNDAuMzQ5LDAtNzQuODAyLDE0LjI3OS0xMDMuMzUzLDQyLjgzICAgYy0yOC41NTMsMjguNTQ0LTQyLjgyNSw2Mi45OTktNDIuODI1LDEwMy4zNTFjMCwyLjg1NiwwLjE5MSw2Ljk0NSwwLjU3MSwxMi4yNzVjLTIyLjA3OCwxMC4yNzktMzkuODc2LDI1LjgzOC01My4zODksNDYuNjg2ICAgQzYuNzU5LDI5OS4wNjcsMCwzMjIuMDU1LDAsMzQ3LjE4YzAsMzUuMjExLDEyLjUxNyw2NS4zMzMsMzcuNTQ0LDkwLjM1OWMyNS4wMjgsMjUuMDMzLDU1LjE1LDM3LjU0OCw5MC4zNjIsMzcuNTQ4aDMxMC42MzYgICBjMzAuMjU5LDAsNTYuMDk2LTEwLjcxNSw3Ny41MTItMzIuMTIxYzIxLjQxMy0yMS40MTIsMzIuMTIxLTQ3LjI0OSwzMi4xMjEtNzcuNTE1ICAgQzU0OC4xNzIsMzM5Ljc1Nyw1NDAuMTc0LDMxNi45NTIsNTI0LjE4MywyOTcuMDY1eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=';

                    const option = {
                        title: {
                            text: "试题广场高频考点",
                            subtext: '数据来自牛客网[试题广场]',
                            x: "center"
                        },
                        backgroundColor: "#fff",
                        tooltip: {
                          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
                        },
                        toolbox: {
                            show: true,
                            orient: 'vertical',
                            top: 'center',
                            right: 50,
                            feature: {
                                // dataView: {readOnly: true},
                                // restore: {},
                                saveAsImage: {}
                            }
                        },
                        series: [
                            {
                                type: "wordCloud",
                                //用来调整词之间的距离
                                gridSize: 10,
                                //用来调整字的大小范围
                                // Text size range which the value in data will be mapped to.
                                // Default to have minimum 12px and maximum 60px size.
                                sizeRange: [14, 60],
                                // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
                                //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
                                // rotationRange: [-45, 0, 45, 90],
                                // rotationRange: [ 0,90],
                                rotationRange: [0, 25],
                                //随机生成字体颜色
                                // maskImage: maskImage,
                                // textStyle: {
                                //     normal: {
                                //         color: function() {
                                //             return (
                                //                 "rgb(" +
                                //                 Math.round(Math.random() * 255) +
                                //                 ", " +
                                //                 Math.round(Math.random() * 255) +
                                //                 ", " +
                                //                 Math.round(Math.random() * 255) +
                                //                 ")"
                                //             );
                                //         }
                                //     }
                                // },
                                textStyle: {
                                    fontFamily: '微软雅黑',
                                    color: function () {
                                        return 'rgb(' + [
                                            Math.round(Math.random() * 250),
                                            Math.round(Math.random() * 250),
                                            Math.round(Math.random() * 250)
                                        ].join(',') + ')';
                                    }
                                },
                                //位置相关设置
                                // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                                // Default to be put in the center and has 75% x 80% size.
                                left: "center",
                                top: "center",
                                right: null,
                                bottom: null,
                                width: "200%",
                                height: "200%",
                                //数据
                                data: this.worddata
                            }
                        ]


                    };

                    this.chart.setOption(option);
                })

            },
        }
    }
</script>

<style scoped>

</style>